<template>
    <div class="content-wrapper">
        <el-row class="content-row">
            <el-col class="height-init" :span="24">
                <div class="container">
                    <el-row class="handle-box">
                        <!--                        <el-date-picker-->
                        <!--                                v-model="query.time"-->
                        <!--                                type="datetimerange"-->
                        <!--                                range-separator="至"-->
                        <!--                                @change="dateChange"-->
                        <!--                                start-placeholder="开始时间"-->
                        <!--                                end-placeholder="结束时间"-->
                        <!--                                style="width:380px"-->
                        <!--                                :default-time="['00:00:00', '23:59:59']">-->
                        <!--                        </el-date-picker>-->

                        <el-date-picker
                                v-model="query.time"
                                type="datetime"
                                placeholder="选择日期时间"
                                default-time="12:00:00">
                        </el-date-picker>


                        <el-input v-model="query.goodsName" placeholder="商品名称" class="handle-input mr10"></el-input>

                        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                        <el-button type="primary" icon="el-icon-plus" @click="add">新增秒杀</el-button>
                    </el-row>
                    <el-row class="list-table-row">
                        <el-table
                                :data="tableData"
                                border
                                class="table"
                                height="100%"
                                ref="multipleTable"
                                header-cell-class-name="table-header"
                                @selection-change="handleSelectionChange"
                        >
                            <el-table-column type="selection" width="55" align="center"></el-table-column>
                            <el-table-column type="index" width="50" align="center" label="序号"></el-table-column>
                            <el-table-column prop="seckillNo" label="活动编号" align="center"></el-table-column>
                            <el-table-column prop="goodsId" align="center" label="商品ID"
                                             show-overflow-tooltip></el-table-column>
                            <el-table-column prop="goodsName" align="center" label="商品名称"
                                             show-overflow-tooltip></el-table-column>
                            <el-table-column prop="goodsSpec" align="center" label="商品规格"
                                             show-overflow-tooltip></el-table-column>
                            <el-table-column prop="integralNum" align="center" label="消耗积分"
                                             show-overflow-tooltip></el-table-column>
                            <el-table-column prop="hasNum" align="center" label="已兑数量" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    {{scope.row.convertedNum}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="num" align="center" label="上架数量"
                                             show-overflow-tooltip></el-table-column>

                            <el-table-column prop="createTime" align="center" label="开始时间" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    {{renderTime(scope.row.startTime)}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="createTime" align="center" label="结束时间" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    {{renderTime(scope.row.endTime)}}
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="300" align="center" fixed="right">
                                <template slot-scope="scope">
                                    <el-button type="text" size="small"
                                               @click="handleDetail(scope.row)">详情
                                    </el-button>

                                    <el-button type="text" size="small"
                                               @click="handleEdit(scope.row)">编辑
                                    </el-button>

                                    <el-button type="text" size="small"
                                               @click="handleDelete(scope.row)">删除
                                    </el-button>


                                </template>
                            </el-table-column>
                        </el-table>
                    </el-row>
                    <el-row class="pagination-self">
                        <el-pagination
                                background
                                layout="total, sizes, prev, pager, next"
                                :current-page="query.pageNo"
                                :page-size="query.pageSize"
                                :total="pageTotal"
                                @size-change="handleSizeChange"
                                @current-change="handlePageChange"
                        ></el-pagination>
                    </el-row>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    // import { fetchPageList, queryIdentifyList, updateUser, saveUser } from '../../../api/lhtUser/lhtUser'
    import {getPage,deleteInfo} from '../../../../api/mall/seckill'


    export default {
        name: 'lhtUserList',
        data() {
            return {
                query: {
                    nickname: '',
                    identityId: '',
                    phone: '',
                    pageNo: 1,
                    pageSize: 20
                },
                tableData: [],
                multipleSelection: [],
                addVisible: false,
                editVisible: false,
                pageTotal: 0,
                fullscreenLoading: false,
                types: [],
                addForm: {
                    identityIds: [],
                    id: '',
                },
                addRules: {
                    identityIds: [
                        {required: true, message: '请选择身份', trigger: ['blur', 'change']}
                    ]
                },
                editForm: {
                    identityIds: [],
                    nickname: '',
                    phone: ''
                },
                editRules: {
                    nickname: [
                        {required: true, message: '请输入昵称', trigger: ['blur', 'change']}
                    ],
                    phone: [
                        {required: true, pattern: /^1[34578]\d{9}$/, message: '请输入正确的电话号码', trigger: ['blur', 'change']}
                    ],
                    identityIds: [
                        {required: true, message: '请选择身份', trigger: ['blur', 'change']}
                    ]
                }
            };
        },
        activated() {
            this.getData();
        },
        created() {
            this.getData();
        },
        props: ['auths'],
        methods: {
            //提交用户信息
            submitUser(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.fullscreenLoading = true;
                        saveUser(this.editForm).then(res => {
                            console.log(res);
                            if (res.code == '0') {
                                this.fullscreenLoading = false;
                                this.editVisible = false;
                                this.$message({
                                    message: '录入成功',
                                    type: 'success'
                                });
                                this.resetForm('editForm');
                                this.getData();
                            } else {
                                this.fullscreenLoading = false;
                                this.$message({
                                    message: res.msg,
                                    type: 'error'
                                });
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            add() {
                this.addTag('秒杀活动添加', '/mall/seckill/add', 'seckillAdd')

            },
            /**
             * 获取列表
             */
            getData() {
                getPage(this.query).then(res => {
                    console.log(res);
                    this.tableData = res.data.records;
                    this.pageTotal = res.data.total || 50;
                });
            },
            /**
             * 弹窗编辑用户身份
             */
            editUserIdentify() {
                if (this.multipleSelection.length > 0) {
                    if (this.multipleSelection.length == 1) {
                        this.resetForm('addForm');
                        this.addForm.identityIds = [];
                        this.addForm.id = this.multipleSelection[0].id;
                        let array = this.multipleSelection[0].identityIds;
                        if (array != null && array.length > 0) {
                            let identy = array.split(",");
                            identy.forEach(element => {
                                this.addForm.identityIds.push(parseInt(element));
                            })
                        }
                        this.addVisible = true;
                    } else {
                        this.$message({
                            message: '只能选择一条记录进行设置!!',
                            type: 'error'
                        });
                    }
                } else {
                    this.$message({
                        message: '请选择记录!',
                        type: 'error'
                    });
                }
            },
            /**
             * 点击修改用户身份
             */
            editUser(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.fullscreenLoading = true;
                        let json = {};
                        json.id = this.addForm.id;
                        let text = "";
                        this.addForm.identityIds.forEach((element, index) => {
                            if (index != 0) {
                                text += ',';
                            }
                            text += element;
                        })
                        json.identityIds = text;
                        updateUser(json).then(res => {
                            console.log(res);
                            if (res.code == '0') {
                                this.fullscreenLoading = false;
                                this.addVisible = false;
                                this.$message({
                                    message: '设置成功',
                                    type: 'success'
                                });
                                this.resetForm('addForm');
                                this.getData();
                            } else {
                                this.fullscreenLoading = false;
                                this.$message({
                                    message: res.msg,
                                    type: 'error'
                                });
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            // 编辑操作
            handleEdit(row) {
                this.addTag('秒杀编辑', '/mall/seckill/edit/' + row.seckillId, 'seckillEdit');
            }, // 编辑操作
            handleDetail(row) {
                this.addTag('秒杀详情', '/mall/seckill/detail/' + row.seckillId, 'seckillDetail');
            }, // 编辑操作
            handleDelete(row) {
                // 二次确认下架
                this.$confirm('确认是否删除？', '提示', {
                    type: 'warning'
                }).then(() => {

                    deleteInfo( row.seckillNo).then(res => {
                        if (res.code == '0') {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getData();
                        }
                    })
                })
            },

            // 触发搜索按钮
            handleSearch() {
                this.$set(this.query, 'pageNo', 1);
                this.getData();
            },
        },


        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageNo', val);
            this.getData();
        },
        //分页器
        handleSizeChange(val) {
            this.$set(this.query, 'pageSize', val);
            this.getData();
        },

    }
    ;
</script>

<style scoped>

    .content-wrapper {
        height: 100%;
        overflow-y: hidden;
    }

    .content-row {
        height: 100%;
    }

    .height-init {
        height: 100%;
    }

    .container {
        height: 100%;
    }

    .handle-box {
        height: 6.5%;
    }

    .handle-input {
        width: 120px;
        display: inline-block;
    }

    .list-table-row {
        height: 83%;
    }

    .table {
        width: 100%;
        height: 100%;
        font-size: 14px;
    }

    .red {
        color: #ff0000;
    }

    .mr10 {
        margin-right: 10px;
    }

    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }

    .pagination-self {
        height: 10%;
        text-align: right;
        margin-top: 5px;
    }
</style>
